let icon = [
  {
    "data":'<svg width="100%" height="100%" version="1.1" style="transform: rotateZ(270deg) rotateY(0deg);"><circle stroke-dasharray="338" stroke-dashoffset="338" cx="50%" cy="50%" r="50%" class="path" style="animation-name: shape-circle-338;"></circle></svg><svg width="100%" height="100%" version="1.1" style="transform: rotateZ(315deg) rotateY(180deg);"><rect stroke-dasharray="431" stroke-dashoffset="431" x="0" y="0" width="100%" height="100%" class="path" style="/* animation-name: shape-rect-431; */"></rect></svg>'
  },
  {
    "data":'<svg width="100%" height="100%" version="1.1" style="transform: rotateZ(315deg) rotateY(180deg);"><rect stroke-dasharray="431" stroke-dashoffset="431" x="0" y="0" width="100%" height="100%" class="path" style="/* animation-name: shape-rect-431; */"></rect></svg>'
  },
  {
    "data":'<svg width="100%" height="100%" version="1.1" style="transform: rotateZ(270deg) rotateY(0deg);"><circle stroke-dasharray="338" stroke-dashoffset="338" cx="50%" cy="50%" r="50%" class="path" style="animation-name: shape-circle-338;"></circle></svg>'
  },
  {
    "data":'<svg width="100%" height="100%" version="1.1" style="transform: rotateZ(315deg) rotateY(180deg);"><rect stroke-dasharray="431" stroke-dashoffset="431" x="0" y="0" width="100%" height="100%" class="path" style="/* animation-name: shape-rect-431; */"></rect></svg>'
  },
  {
    "data":'<svg width="100%" height="100%" version="1.1" style="transform: rotateZ(270deg) rotateY(0deg);"><circle stroke-dasharray="338" stroke-dashoffset="338" cx="50%" cy="50%" r="50%" class="path" style="animation-name: shape-circle-338;"></circle></svg>'
  },
  {
    "data":'<svg width="100%" height="100%" version="1.1" style="transform: rotateZ(270deg) rotateY(0deg);"><circle stroke-dasharray="338" stroke-dashoffset="338" cx="50%" cy="50%" r="50%" class="path" style="animation-name: shape-circle-338;"></circle></svg>'
  },
  {
    "data":'<svg width="100%" height="100%" version="1.1" style="transform: rotateZ(315deg) rotateY(180deg);"><rect stroke-dasharray="431" stroke-dashoffset="431" x="0" y="0" width="100%" height="100%" class="path" style="/* animation-name: shape-rect-431; */"></rect></svg>'
  },
  {
    "data":'<svg width="100%" height="100%" version="1.1" style="transform: rotateZ(270deg) rotateY(0deg);"><circle stroke-dasharray="338" stroke-dashoffset="338" cx="50%" cy="50%" r="50%" class="path" style="animation-name: shape-circle-338;"></circle></svg><svg width="100%" height="100%" version="1.1" style="transform: rotateZ(315deg) rotateY(180deg);"><rect stroke-dasharray="431" stroke-dashoffset="431" x="0" y="0" width="100%" height="100%" class="path" style="/* animation-name: shape-rect-431; */"></rect></svg>'
  },
  {
    "data":'<svg width="100%" height="100%" version="1.1" style="transform: rotateZ(315deg) rotateY(180deg);"><rect stroke-dasharray="431" stroke-dashoffset="431" x="0" y="0" width="100%" height="100%" class="path" style="/* animation-name: shape-rect-431; */"></rect></svg>'
  },
  {
    "data":'<svg width="100%" height="100%" version="1.1" style="transform: rotateZ(270deg) rotateY(0deg);"><circle stroke-dasharray="338" stroke-dashoffset="338" cx="50%" cy="50%" r="50%" class="path" style="animation-name: shape-circle-338;"></circle></svg>'
  },
  {
    "data":'<svg width="100%" height="100%" version="1.1" style="transform: rotateZ(270deg) rotateY(0deg);"><circle stroke-dasharray="338" stroke-dashoffset="338" cx="50%" cy="50%" r="50%" class="path" style="animation-name: shape-circle-338;"></circle></svg>'
  },
  {
    "data":'<svg width="100%" height="100%" version="1.1" style="transform: rotateZ(315deg) rotateY(180deg);"><rect stroke-dasharray="431" stroke-dashoffset="431" x="0" y="0" width="100%" height="100%" class="path" style="/* animation-name: shape-rect-431; */"></rect></svg>'
  },
  {
    "data":'<svg width="100%" height="100%" version="1.1" style="transform: rotateZ(270deg) rotateY(0deg);"><circle stroke-dasharray="338" stroke-dashoffset="338" cx="50%" cy="50%" r="50%" class="path" style="animation-name: shape-circle-338;"></circle></svg>'
  },
  {
    "data":'<svg width="100%" height="100%" version="1.1" style="transform: rotateZ(315deg) rotateY(180deg);"><rect stroke-dasharray="431" stroke-dashoffset="431" x="0" y="0" width="100%" height="100%" class="path" style="/* animation-name: shape-rect-431; */"></rect></svg>'
  },
  {
    "data":'<svg width="100%" height="100%" version="1.1" style="transform: rotateZ(270deg) rotateY(0deg);"><circle stroke-dasharray="338" stroke-dashoffset="338" cx="50%" cy="50%" r="50%" class="path" style="animation-name: shape-circle-338;"></circle></svg><svg width="100%" height="100%" version="1.1" style="transform: rotateZ(315deg) rotateY(180deg);"><rect stroke-dasharray="431" stroke-dashoffset="431" x="0" y="0" width="100%" height="100%" class="path" style="/* animation-name: shape-rect-431; */"></rect></svg>'
  }
]